<template>
    <div class="classify page">
        <formHeader :title="'商品分类'"></formHeader>
        <div class="content">
            <cube-scroll
                    class="sideNav"
                    ref="scroll"
                    :data="items"
                    :option="options"
            >
                <ul class="sideBar">
                    <li
                            class="sideItem"
                            v-for="(item,index) in items"
                            :key="item.id"
                            @click="change(index)"
                            :class="{isActive:activedIndex==index}"
                            ref="leftItem"
                    >{{item.name}}</li>
                </ul>
            </cube-scroll>
            <cube-scroll
                    class="scrollContent"
                    ref="scrollContent"
                    :data="items"
                    :option="options"
                    @scroll="scrollRight"
                    :scrollEvents="['scroll']"
            >
                <div class="goodsList">
<!--                    <div class="banner">-->
<!--                        <img src="./typeImg.png"/>-->
<!--                    </div>-->
                    <div
                            class="typeItem"
                            v-for="(item,index) in items"
                            :key="item.id"
                            ref="goodsItem"
                    >
                        <div class="title">{{item.name}}</div>
                        <ul>
                            <li
                                    class="goodsItem"
                                    v-for="(goodsItem,index) in item.children"
                                    :key="goodsItem.id"
                                    @click="turn(goodsItem.id)"
                            >
                                <img :src="imgDomain+goodsItem.img"/>
                                <div>{{goodsItem.name}}</div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="stand"></div>
            </cube-scroll>
        </div>
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    import {topList, bannerList,getMenubarList,getTabBarType,getHeadGoods} from "@/api/home"
    export default {
        components:{formHeader},
        name : "class",
        data(){
            return{
                activedIndex:0,
                options:{
                    observeDOM: true,
                    click: true,
                    probeType: 1,
                    scrollbar: false,
                    pullDownRefresh: false,
                    pullUpLoad: false
                },
                itemHeight:[],
                scrollY:0,
                imgDomain: process.env.VUE_APP_IMG_DOMAIN,
                items:[],
                count:0
            }
        },
        methods:{
            // 点击左侧，改变右侧
            change(index){
                let height = 0
                this.activedIndex=index
                for (let i = 0; i < index; i++) {
                    height += this.$refs.goodsItem[i].offsetHeight
                }
                this.$refs.scrollContent.scrollTo(0, -height)
                // console.log(this.$refs.goodsItem)
                // this.getItemHeight()

            },
            //监控右侧高度
            scrollRight(e){
                this.scrollY=e.y

            },
            //获取数据
            async getTabBarList(){
                const {data:res} = await getTabBarType()
                // console.log(res)
                this.items = res
                // setTimeout(this.getItemHeight(),0)
                // this.$nextTick(this.getItemHeight())
            },
            //计算右侧每个区域高度
            getItemHeight(){
                let h = 0
                let list = this.$refs.goodsItem
                // console.log(list)
                list.forEach((item, i) => {
                    h += list[i].clientHeight
                    this.itemHeight.push(h)
                })
                this.itemHeight.unshift(0)
            },
            turn(path) {
                console.log(path)
                if(!path)return
                this.$router.push({
                    path:`/goodslist?saletype=${path}`
                })
            }
        },
        created(){
            this.getTabBarList()
        },
        updated(){
            if(this.count==0){
                // console.log(11111111)
                this.getItemHeight()
                this.count++
            }
        },
        watch:{
            //右侧滚动，改变左侧
            scrollY(newY){
                if (newY >= 0) this.activedIndex = 0
                let itemHeight = this.itemHeight
                for (let i = 0; i < itemHeight.length - 1; i++) {
                    let h1 = itemHeight[i]
                    let h2 = itemHeight[i + 1]
                    if (-newY >= h1 && -newY < h2) {
                        this.activedIndex = i
                        return
                    }
                }
            }
        }
    }
</script>

<style scoped lang="stylus">
.classify
    background-color $page-bg
.content
    margin-top 1.28rem
    height 100%
    display flex
    .sideNav
        width 2.13rem
    .sideBar
        width 2.13rem
        /*height 100%*/
        padding-bottom 1.17rem
        .sideItem
            font-size 0.29rem
            color #333333
            height 1.20rem
            background-color  #F1F1F1
            display flex
            justify-content center
            align-items center
        .isActive
            color #00A390
            font-size 0.32rem
            background-color #fff
    .scrollContent
        width 7.30rem
        padding 0.21rem 0.27rem
        background-color #fff

        /*height 100%*/
    .goodsList
        padding-bottom 1.17rem
        .banner
            margin-bottom 0.56rem
            img
                width 7.33rem
                height 2.59rem
    .typeItem
        padding-bottom 0.40rem
        .title
            padding-top 0.23rem
            color #333333
            font-size 0.35rem
            font-weight bold
            margin-bottom 0.27rem
        ul
            width 100%
            display flex
            flex-wrap wrap
            .goodsItem
                margin 0.25rem
                font-size 0.29rem
                color #333
                img
                    width 1.89rem
                    height 1.89rem
                    margin-bottom 0.13rem
                div
                    text-align center
    .stand
        height 9.33rem
        background-color #fff

</style>